<template>
	<view class="page">
		<wd-navbar title="联系客服" fixed placeholder left-arrow safeAreaInsetTop custom-class="nav" :bordered="false" @click-left="handleClickLeft"></wd-navbar>
		<view class="content_box">
			<view>
				<wd-text text="Hi~" color="#333333" bold></wd-text>
				<wd-gap height="10rpx"></wd-gap>
				<wd-text text="有什么可以帮您!" color="#333333" bold></wd-text>
			</view>
			<wd-gap height="30rpx"></wd-gap>
			<view class="card_box d-flex" @click="makePhoneCall">
				<wd-img src="/static/assets/my/kf1.png" width="28" height="28"></wd-img>
				<view style="margin-left: 10px;">
					<view>
						<view class="d-flex" style="font-size: 14px;color: #333333;">
							客服电话：
							<rich-text style="color: #FE3D65;font-size: 14px;" :nodes="phone"></rich-text>
						</view>
					</view>
					
					<wd-gap height="1rpx"></wd-gap>
					<view class="d-flex" style="font-size: 12px;color: #7D7D7D;">
						工作时间：
						<rich-text :nodes="worktime"></rich-text>
					</view>
				</view>
			</view>
			<wd-gap height="30rpx"></wd-gap>
			<view class="card_box d-flex">
				<wd-img src="/static/assets/my/kf2.png" width="28" height="28"></wd-img>
				<view style="margin-left: 10px;">
					<wd-text size="14px" color="#333333" text="问题反馈"></wd-text>
					<wd-gap height="1rpx"></wd-gap>
					<wd-text size="12px" text="收到您的反馈后,我们将尽快为您解决"></wd-text>
				</view>
			</view>
			<wd-gap height="60rpx"></wd-gap>
			<wd-text size="12px" text="尊敬的用户,您的反馈我们十分重视,如在非工作日咨询还请关注微信公众、QQ或问题反馈留下您的问题,客服上班后第一时间联系您处理哦!"></wd-text>
		</view>
	</view>
</template>

<script setup>
import { toRouter } from "@/hooks/utils";
import { ref, onMounted } from 'vue';

const phone = ref('');
const worktime = ref('');

const handleClickLeft = function handleClickLeft() {
  uni.navigateBack()
}
const makePhoneCall = ()=> {
	uni.makePhoneCall({
		phoneNumber: '4000033080' //仅为示例
	});
}
onMounted(() => {
	uni.request({
		url: '/api/wallpaper/config/list',
		method: 'GET',
		success: (res) => {
			if( res.data.length > 0 ){
				res.data.forEach(item => {
					if( item.type == 'phone' ){
						phone.value = item.value
					}
					if( item.type == 'worktime' ){
						worktime.value = item.value
					}
				})
			}
		}
	})
})
</script>

<style lang="scss" scoped>
:deep() {
	.nav {
		background: rgb(245, 245, 245) url("http://124.223.41.167:8080/mobile/static/images/bg.png") no-repeat top left/100% auto;
	}
}
.page {
	position: relative;
	&:before {
		content: '';
		position: fixed;
		left: 0;
		top: 0;
		width: 100vw;
		height: 100vh;
		background: rgb(245, 245, 245) url("http://124.223.41.167:8080/mobile/static/images/bg.png") no-repeat top left/100%;
		z-index: -1;
	}
}
.content_box {
	padding: 40rpx;
	.card_box {
		background: #fff;
		border-radius: 12rpx;
		padding: 30rpx 60rpx;
	}
}
</style>
